Pullquotes

...añadiendo
pullquotes en una entrada.
¿Qué tal si probamos?

Suerte..

Crear una entrada diferente no es tan difícil sobre todo cuando tenemos una ayuda extra por parte de Mandarin Design
Hay que perder el miedo y no pensar que nos va a salir mal, después de todo vamos a probar en una entrada y si cometemos errores la eliminamos y listo.
Lo que vamos a hacer es añadir pullquotes.
Se trata de crear un espacio para añadir un tipo de letra más grande en la misma página, sirve para conducir a los lectores en un artículo y para destacar un tema en especial. Se utiliza principalmente en el periodismo y la edición.

...texto pullquote
texto pullquote - texto pullquote
texto pullquote - texto pullquote
texto pullquote texto pullquote...

La forma de hacerlo es tan sencilla como copiar y pegar el siguiente código.
He distinguido con diferente color para saber donde situar el texto del pullquote (color azul) y texto de la entrada color (verde) espero que ahora si ¿verdad Jaime?

<div   style="background: white none repeat scroll 0% 50%; color: rgb(56, 46, 46); width: 150px; height: 100px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; opacity: 0.9; float: right; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; line-height: 16px; text-align: right;">
<span style="opacity: 0.75;">...texto pullquote</span>
texto pullquote - texto pullquote
<b>texto pullquote - texto pullquote</b>
texto pullquote <span style="opacity: 0.9;">texto pullquote...</span>
</div>

<p style="text-align: justify;">texto de la entrada-texto de la entrada-texto de la entrada
</p><p style="text-align: justify;">
</p>
<div style="clear: both;">
</div>

Más sobre pullquotes

...this will look like some of the pullquotes or subtitles we see in magazine
layout.........

Hay muchas formas para decorar un pullquote y hacer que este sea un punto de atención que es de lo que se trata, enmarcarlo como en este ejemplo de Mandarin Design

O como en este caso... jugando con el padding, margin y width del código.

Imagen de fondo...

De lo que se trata es de perder el miedo a los resultados, de probar no sólo con estos ejemplos sino con otros muchos que nos pueden hacer pasar un rato agradable y obtener efectos originales para nuestras entradas.

<p style="border: 0px solid black; margin: 20px; padding: 47px; background: transparent url(Url-de-la-imagen) repeat scroll 0% 50%; float: right; width: 30%; font-size: 0.8em; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<strong>Texto sobre imagen...</strong>
</p>
Texto de la entrada.

Más sobre Blockquotes